import React from "react";
import { Droppable, Draggable } from "@hello-pangea/dnd";
import { Tag, Button } from "antd";
import { DeleteOutlined } from "@ant-design/icons";
import { format } from "date-fns";
import { Todo } from "../App";
import "./TodoList.css";

interface TodoListProps {
  todos: Todo[];
  onToggle: (id: number) => void;
  onDelete: (id: number) => void;
}

const getPriorityColor = (priority: string) => {
  switch (priority) {
    case "high":
      return "red";
    case "medium":
      return "orange";
    case "low":
      return "green";
    default:
      return "#757575";
  }
};

const TodoList: React.FC<TodoListProps> = ({ todos, onToggle, onDelete }) => {
  if (todos.length === 0) {
    return <p className="empty-message">暂无待办事项，请先添加。</p>;
  }

  return (
    <Droppable droppableId="todos">
      {(provided) => (
        <ul
          className="todo-list"
          ref={provided.innerRef}
          {...provided.droppableProps}
        >
          {todos.map((todo, index) => (
            <Draggable
              key={todo.id}
              draggableId={todo.id.toString()}
              index={index}
            >
              {(provided) => (
                <li
                  ref={provided.innerRef}
                  {...provided.draggableProps}
                  {...provided.dragHandleProps}
                  className={`todo-item ${todo.completed ? "completed" : ""}`}
                >
                  <div className="todo-content">
                    <label className="todo-label">
                      <input
                        type="checkbox"
                        checked={todo.completed}
                        onChange={() => onToggle(todo.id)}
                        className="todo-checkbox"
                      />
                      <span className="todo-text">{todo.text}</span>
                    </label>
                    <div className="todo-details">
                      <Tag
                        color={getPriorityColor(todo.priority)}
                        className="priority-chip"
                      >
                        {todo.priority === "high"
                          ? "高"
                          : todo.priority === "medium"
                          ? "中"
                          : "低"}
                      </Tag>
                      {todo.dueDate && (
                        <Tag className="date-chip">
                          {format(new Date(todo.dueDate), "MMM d, yyyy")}
                        </Tag>
                      )}
                      {todo.tags.map((tag) => (
                        <Tag key={tag} className="tag-chip">
                          {tag}
                        </Tag>
                      ))}
                    </div>
                  </div>
                  <Button
                    onClick={() => onDelete(todo.id)}
                    className="delete-button"
                    icon={<DeleteOutlined />}
                    type="text"
                    aria-label="删除待办"
                  />
                </li>
              )}
            </Draggable>
          ))}
          {provided.placeholder}
        </ul>
      )}
    </Droppable>
  );
};

export default TodoList;
